<!--
 * @Description:登录日志
-->

<template>
  <div class="registered-container directManagementSetup appMainWarp">
    <el-form :inline="true" :model="searchKey" class="demo-form-inline">
      <el-form-item label="用户名:">
        <el-input v-model="searchKey.directName" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="onSearch"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        ref="table"
        v-loading="page.tableLoading"
        v-el-height-adaptive-table="{bottomOffset: 0}"
        max-height="500px"
        center
        class="table"
        :data="searchDate"
        stripe
        border
      >
        <el-table-column type="index" width="90" label="序号" />
        <el-table-column label="用户ID" align="center">
          <template slot-scope="scope">{{ scope.row.user_id || "-" }}</template>
        </el-table-column>
        <el-table-column label="用户名" align="center">
          <template slot-scope="scope">{{ scope.row.user_name || "-" }}</template>
        </el-table-column>
        <el-table-column label="用户角色" align="center">
          <template slot-scope="scope">{{ scope.row.role_name || "-" }}</template>
        </el-table-column>
        <el-table-column label="登录IP" align="center">
          <template slot-scope="scope">{{
            scope.row.login_ip || "-"
          }}</template>
        </el-table-column>
        <el-table-column label="登录时间" align="center">
          <template slot-scope="scope">{{
            scope.row.create_time || "-"
          }}</template>
        </el-table-column>
        <!-- <el-table-column label="上线时间" align="center">
          <template slot-scope="scope">{{
            scope.row.modify_time || "-"
          }}</template>
        </el-table-column> -->
      </el-table>
    </template>
    <pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSearch"
    />
  </div>
</template>

<script>
import elHeightAdaptiveTable from '@/directive/el-table'
import Pagination from '@/components/Pagination' // 分页
import {
  logList
} from '@/api/systemManagement/userManagement/index'
export default {
  name: 'Logs',
  directives: { elHeightAdaptiveTable },
  components: {
    Pagination
  },
  data() {
    return {
      searchKey: {
        directName: '' // 角色名称
      },
      searchDate: [],
      page: {
        tableLoading: false,
        currentPage: 1,
        pageSize: 20,
        totalRow: 0,
        totalPage: 0
      }
    }
  },

  created() {},
  mounted() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      this.page.currentPage = 1
      this.onSearch()
    },
    onSearch() {
      var params = {}
      var that = this
      params.page = that.page.currentPage // 当前页数
      params.limit = that.page.pageSize // 每页展示条数
      params.username = that.searchKey.directName
      that.page.tableLoading = true
      logList(params)
        .then((res) => {
          that.page.tableLoading = false
          that.searchDate = res.data.result
          that.page.totalPage = res.data.pages
          that.page.totalRow = parseInt(res.data.count)
        })
        .catch(() => {
          that.page.tableLoading = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.directManagementSetup {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  .demo-form-inline {
    .el-button--primary {
      background-color: #579ef8 !important;
      color: #fff !important;
    }
    // .el-button {
    //   background-color: #e8f4ff;
    //   color: #579ef8;
    //   border: 1px solid rgba(87, 158, 248, 1);
    // }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .viewdetails {
    color: #1890ff;
    cursor: pointer;
  }
  .abnormal {
    color: #f65952;
    cursor: pointer;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
<style>
.directManagementSetup .el-dialog__header {
  text-align: center;
}
</style>
